<template>
    <n-collapse :default-expanded-names="['2']">
        <n-collapse-item title="全局" name="1">
            <n-checkbox v-model:checked="isSelect" >是否可选</n-checkbox>
            <div v-if="isSelect">
                <n-radio-group v-model:value="isMultiple" name="radiogroup">
                    <n-space>
                        <n-radio v-for="song in [{label:'单选',value:false},{label:'多选',value:true}]" :key="song.value" :value="song.value">
                            {{ song.label }}
                        </n-radio>
                    </n-space>
                </n-radio-group>
            </div>
           

        </n-collapse-item>
        <n-collapse-item title="当前列" name="2">
            <n-form
                ref="formRef"
                :label-width="80"
                :model="curCol"
                :rules="[]"
                style="padding:4px 20px;"
            >
                <n-form-item label="列名" path="tpmTitle">
                    <n-input v-model:value="curCol.tpmTitle" placeholder="请输入" />
                </n-form-item>
                <n-form-item label="key" path="key">
                    <n-input v-model:value="curCol.key" placeholder="请输入" />
                </n-form-item>
                <n-form-item label="是否可筛选" >
                    <n-checkbox v-model:checked="hasFilter" >筛选</n-checkbox>
                </n-form-item>
                <n-collapse :default-expanded-names="['f1']"  v-if="hasFilter">
                    <n-collapse-item title="筛选设置" name="f1">
                        <n-form-item label="筛选类型" >
                            <n-radio-group v-model:value="filterType" name="radiogroup" @change="typeChange">
                                <n-space>
                                    <n-radio v-for="song in filterTypeOpt" :key="song.value" :value="song.value">
                                        {{ song.label }}
                                    </n-radio>
                                </n-space>
                            </n-radio-group>
                        </n-form-item>
                        <n-form-item label="筛选选项设置" v-if="filterType==='checkbox'||filterType==='radio'" >
                            <n-input
                                v-model:value="filterOptions"
                                type="textarea"
                                placeholder=""
                            />
                        </n-form-item>
                        <n-form-item label="筛选默认值" > 
                            <div>
                                <n-table  :single-line="false" v-if=" col.filterOptions&& col.filterOptions.length">
                                    <thead>
                                    <tr>
                                        <td>序号</td>
                                        <th>字段</th>
                                        <th>显示名称</th>
                                        <th>是否选中</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in col.filterOptions" :key="'opt'+index">
                                        <td >{{ index }}</td>
                                        <td>{{ item.value }}</td>
                                        <td>{{ item.label }}</td>
                                        <td>
                                            <n-checkbox v-model:checked="defFilter" ></n-checkbox>
                                        </td>
                    
                                    </tr>
                                    </tbody>
                                </n-table>
                        
                                <n-input v-model:value="defFilter" placeholder="请输入" />
                            </div>
                            
                        </n-form-item>
                    </n-collapse-item>
                </n-collapse>
                
            </n-form>
        </n-collapse-item>
        
    </n-collapse>
</template>
<script setup lang="ts">
import { computed } from "vue"




const props= defineProps({
    columns:{
        type:Array,
        default:()=>[]
    },
    col:{
        type:Object,
        default:()=>{}
    }
})
const emits = defineEmits(['update:columns','update:col'])
const isSelect = computed({
    get(){
        return props.columns.find(item=>item.type==='selection')?true:false
    },
    set(val){
        if(val){
            props.columns.unshift({
                type:'selection',
                multiple: false
            })
            emits('update:columns',props.columns)
            
        }else{
            emits('update:columns',props.columns.filter(item=>item.type!=='selection'))
        }
       
    }
})
const isMultiple = computed({
    get(){
        return props.columns.find(item=>item.type==='selection').multiple?true:false
    },
    set(val){
        props.columns.find(item=>item.type==='selection').multiple = val
        emits('update:columns',props.columns)
    }
})


const curCol = computed({
    get(){
        return props.col
    },
    set(val){
        return  emits('update:col',val)
    }
})
const filterTypeOpt = [{
    label:'输入框',
    value:'input'
},{
    label:'日期',
    value:'date'
},{
    label:'单选',
    value:'radio'
},{
    label:'多选',
    value:'checkbox'
}]
const filterOptions = computed({
    get(){
        return props.col.filterOptions?props.col.filterOptions.map(item=>JSON.stringify(item)).join('\n'):''
    },
    set(val){
        props.col.filterOptions = val.split('\n').map(item=>JSON.parse(item))
        emits('update:col',props.col)
    }
})
const getFilterType = () =>{
    if(props.col.hasOwnProperty('filterMultiple')){
        return  props.col.filterMultiple ? 'checkbox':'radio'
    }
    return props.col.filterControlType ||''
}
const filterType = ref(getFilterType())
const defFilter  = computed({
    get(){
        return props.col.filterOptionValue
    },
    set(val){
        props.col.filterControlType = val
        emits('update:col',props.col)
    }
})

const clearFilter = (all = true)=>{
    all && delete props.col.filter
    delete props.col.filterControlType
    delete props.col.filterControl
    delete props.col.filterOptionValue
    delete props.col.filterMultiple
    delete props.col.filterOptions
    delete props.col.renderFilterMenu
    all && emits('update:col',props.col)
}

const hasFilter = computed({
    get(){
        filterType.value = getFilterType()
        return props.col.filter?true:false
    },
    set(val){
        if(val){
            props.col.filter = true
            props.col.filterControlType = 'input'
            props.col.filterControl = {
                type:'input',
                value:""
            }
            emits('update:col',props.col)
        }else{
            clearFilter()
        }

    }
})

const typeChange = ()=>{
    clearFilter(false)
    switch(filterType.value){
        case 'input':
            props.col.filterControlType = 'input'
            props.col.filterControl = {
                type:'input',
                value:''
            }
            break;
        case 'date':
            props.col.filterControlType = 'date'
            props.col.filterControl = {
                type:'date',
                value:''
            }
            break;
        case 'checkbox':
            props.col.filterMultiple = true
            props.col.filterOptionValue = ''
            props.col.filterOptions =  [
                {
                    label: 'A',
                    value: 1
                },
                {
                    label: 'B',
                    value: 2
                }
            
            ]
            break;
        case 'radio':
            props.col.filterMultiple = false
            props.col.filterOptionValue = ''
            props.col.filterOptions =  [
                {
                    label: 'A',
                    value: 1
                },
                {
                    label: 'B',
                    value: 2
                }
            
            ]
            break;
    }
}
</script>
<style scoped>
.n-collapse .n-collapse-item .n-collapse-item{
    margin-left: 0;
}
</style>

<!-- {
    type: 'selection',
    // multiple: false
},
{
    title: '名称',
    key: 'name'
},
{
    title: '价格',
    key: 'price',
    filterMultiple: false,
    filterOptionValue: 1,
    
    filterOptions: [
        {
            label: '1',
            value: 1
        },
        {
            label: '2',
            value: 2
        }
    
    ], filter:true
},
{
    title: '总数',
    key: 'count',
    filterControlType:'input',
    filter:true,
    filterControl: {
        type:'input',
        value:3
    },
},
{
    title: '创建时间',
    key: 'time',
    filter:true,
    filterControlType:'date',
    filterControl: {
        type:'date',
        value:+new Date()
    },
    formateHtml:(row:any)=>{
        return `${XEUtils.toDateString(row.time) }`
    }
},
{
    title: '创建时间1',
    key: 'createTime',
    filter:true,
    filterControlType:'date',
    filterControl: {
        type:'daterange',
        value:[+new Date(),+new Date('2024/09/10')]
    },
    formateHtml:(row:any)=>{
        return `${XEUtils.toDateString(row.createTime) }`
    }
},
{
    title: '操作',
    key: 'actions',
    actionsList: [{
        text: 'Play',
        onClick: (row) => {
            console.log('play', row)
        }
    }]
} -->